<template>
  <div class="forget_password">
      <div class="home_top">
          <div class="left">
              <h2>二手井大校园</h2> <span class="password"><span class="line"></span> <span class="look_psw">找回密码</span></span>
          </div>
          <div class="right">
              <span @click="methodsType('Login')">登录</span> |
              <span @click="methodsType('Registered')">注册</span>
          </div>
      </div>
      <div class="forget_content">
          <div class="main">
              <Forget></Forget>
          </div>
      </div>
  </div>
</template>

<script>
import Forget from '../../components/Forget'
export default {
  components: {
    Forget
  },
  methods: {
    methodsType (type) {
      this.$router.push({
        name: 'Login',
        query: {
          type: type
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.forget_password {
    z-index: 99;
    .home_top {
        width: 1190px;
        height: 100px;
        margin: 0 auto;
        border-bottom: 1px solid #dadada;
        line-height: 100px;
        display: flex;
        justify-content: space-between;
    }
    .left {
        font-size: 16px;
        display: flex;
        .password {
            margin-left: 20px;
        }
        .look_psw {
            color: #999;
            position: relative;
            left: 5px;
            top: 6px;
        }
        .line {
            display: inline-block;
            height: 37px;
            width: 1px;
            background: #ccc;
            position: relative;
            top: 19px;
        }
        h2 {
            font-weight: 800;
            font-size: 18px;
        }
    }
    .right {
        font-size: 16px;
        span {
            cursor: pointer;
            padding: 0 10px;
        }
        span:hover {
            color: #ff552e;
        }
    }
    .forget_content {
        text-align: center;
        margin-top: 70px;
    }
}
</style>
